window.addEventListener('load', function() {
    // 引入swiper插件 轮播图
    new Swiper('.swiper', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
        effect: 'coverflow',
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    /*
        页面渲染
    */
    // 渲染开发者服务模块
    // 设置数据源
    let arr = [{
            imgUrl: './images/service01.svg',
            title: 'API私有化服务',
            desc: '可部署本地&专有云的Web API'
        },
        {
            imgUrl: './images/service02.svg',
            title: '源码云监测',
            desc: '实时代码托管、 威胁情报监控'
        },
        {
            imgUrl: './images/service01.svg',
            title: '源码有赢',
            desc: '一站式营销活动服务平台'
        },
        {
            imgUrl: './images/service01.svg',
            title: 'YuanMa API',
            desc: 'API开发者协作平台'
        }
    ]
    let sHtml = '';
    let serviceList = document.querySelector('#serviceList');
    arr.forEach((v) => {
        sHtml += `
            <li>
                <img src=${v.imgUrl} alt="">
                <div class="pl24 mt20 pb20">
                    <h4 class="font22 fw400">${v.title}</h4>
                    <p class="font14 mt8 c666">${v.desc}</p>
                    <a href="javascript:;" class="font12 mt20">去搜索</a>
                </div>
            </li>
        `
    })
    serviceList.innerHTML = sHtml;

    //渲染API分类模块
    let apiList = document.querySelector('#apiList')
    let apiData = [{
            imgUrl: './images/api01.svg',
            title: '生活服务'
        },
        {
            imgUrl: './images/api02.svg',
            title: '金融科技'
        },
        {
            imgUrl: './images/api03.svg',
            title: '交通地理'
        },
        {
            imgUrl: './images/api04.svg',
            title: '充值缴费'
        },
        {
            imgUrl: './images/api05.svg',
            title: '数据智能'
        },
        {
            imgUrl: './images/api06.svg',
            title: '企业工商'
        },
        {
            imgUrl: './images/api07.svg',
            title: '应用开发'
        },
        {
            imgUrl: './images/api08.svg',
            title: '电子商务'
        },
        {
            imgUrl: './images/api09.svg',
            title: '吃喝玩乐'
        },
        {
            imgUrl: './images/api10.svg',
            title: '文娱视频'
        }
    ];
    let array = [];
    apiData.forEach((v) => {
        array.push(`
        <li>
        <a href="">
            <img src=${v.imgUrl} alt="">
            <h4 class="mt8 font16 fw400 c18">${v.title}</h4>
         </a>
        </li>
        `)
    });
    apiList.innerHTML = array.join('');
    apiList.addEventListener('mouseover', function(e) {
        let eDome = e.target;
        let eName = eDome.nodeName;
        if (eName === 'A') {
            setType(eDome, eDome.children[0], eDome.children[1]);
        } else if (eName === 'IMG') {
            setType(eDome.parentNode, eDome, eDome.nextElementSibling);
        } else if (eName === 'H4') {
            setType(eDome.parentNode, eDome.previousElementSibling, eDome);
        }
    });
    apiList.addEventListener('mouseout', function(e) {
        let eDome = e.target;
        let eName = eDome.nodeName;
        if (eName === 'A') {
            clearType(eDome, eDome.children[0], eDome.children[1]);
        } else if (eName === 'IMG') {
            clearType(eDome.parentNode, eDome, eDome.nextElementSibling);
        } else if (eName === 'H4') {
            clearType(eDome.parentNode, eDome.previousElementSibling, eDome);
        }
    });
    //定义全局变量
    let oldSrc = '';
    //设置样式
    function setType(a, img, h) {
        a.style.background = 'rgba(18, 113, 239, 0.8)';
        h.style.color = '#fff';
        let imgUrl = img.src
        oldSrc = imgUrl;
        let newStr = imgUrl.substring(imgUrl.lastIndexOf('/') + 1);
        newStr.split('.');
        let newArr = newStr.split('.');
        newArr.splice(1, 0, '-c.')
        img.src = `
           ./images/${newArr.join('')}
        `;
    }
    // 清除样式
    function clearType(a, img, h) {
        a.style.background = '';
        h.style.color = '';
        img.src = oldSrc;
    }
    /* 
       独角兽企业模块
    */
    //获取独角兽企业模块内容盒子
    let licorneContent = getEleAll('#licorne .content .items');
    let index = 0;
    window.setInterval(function() {
        licorneContent[index].classList.remove('selected')
        index++;
        if (index == licorneContent.length) {
            index = 0
        }
        licorneContent[index].classList.add('selected')
    }, 2500);
})